<template>
  <div>
    <h2>计算属性</h2>
    <!-- 计算属性,必须当做属性来使用 不能当做方法来调用 不能加小括号 -->
    <input type="text" v-model.lazy="xing" />+
    <input type="text" v-model.lazy="ming" />=
    <input type="text" v-model.lazy="fullName" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      xing: '澈',
      ming: '澈澈'
    }
  },
  // 计算属性，要写到 和 data 平级的 computed 中
  computed: {
    // 所有的计算属性，都放到这里。【计算属性，必须返回计算的结果】
    // fullName () {
    //   return this.xing + ' ' + this.ming
    // }

    // 如果需要修改计算属性的值，需要写成对象格式。（对象中要写 get 和 set 方法）
    fullName: {
      // 当使用计算属性的时候，get就执行了
      get () {
        return this.xing + ' ' + this.ming
      },
      // 当修改计算属性的时候，set就执行了。形参就是修改后的结果
      set (val) {
        // console.log(val)
        let arr = val.split(' ')
        // console.log(arr)
        this.xing = arr[0]
        this.ming = arr[1]
      }
    }
  }
}
</script>

<style></style>